<template>
  <span class="amount-handler">
      <a @click="$emit('减少')">-</a>
      <b>
         <slot>暂无数据</slot>
      </b>
      <a @click="$emit('增加')">+</a>
  </span>
</template>

<script>
export default {
    name: 'ItemAmount'
}
</script>

<style>
.amount-handler { 
    display: inline-flex; 
    max-width: 180px;
    width: 80%;
    min-width: 100px;
    line-height: 20px;
    background: blue;
    border: 1px solid blue ;
    border-radius: 3px;
    overflow: hidden;
}
.amount-handler>* { text-align: center;}
.amount-handler>a { flex-basis: 20%; color: #fff; user-select: none; }
.amount-handler>b { flex-basis: 60%; background: #fff; }
</style>